﻿@{
    var entity = this.Model.DataType as NantCom.NancyBlack.Types.DataType;
    var entityName = entity.OriginalName;
    
}

@@inherits NantCom.NancyBlack.Modules.ContentSystem.NancyBlackRazorViewBase
@@{
    Layout = "@(this.Model.Layout)";
}
@@section Title
{
    Administration - @entityName
}
<div ng-module="@(entityName)Module"
     ng-controller="@(entityName)Controller as ctrl">

    <h1 class="page-header">
        Manage @(entityName)
        <i class="fa fa-spinner fa-spin" ng-show="isBusy"></i>
    </h1>

    <div style="margin-bottom: 30px">
        This page helps you manage @(entityName) in this system.

    </div>

    <div class="alert alert-danger">
        This page was auto-generated by NancyBlack Engine on: @(DateTime.Now) <br />
        If you generate this page again, all custom changes will be lost.
        <p class="margin-top: 5px">

            <a class="btn btn-lg btn-danger" href="@( "@(this.RenderContext.Context.Request.Path)" )?regenerate=true">Generate Again</a>
        </p>
    </div>

    <div id="@(entityName)Form"
         class="modal fade" data-keyboard="false" data-backdrop="static">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button"
                            class="close"
                            data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <button type="button"
                            ng-hide="object.id == null"
                            ng-click="ctrl.delete(object)"
                            class="close text-warning"
                            style="margin-right: 10px">
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                    <h2 class="modal-title">
                        <span ng-show="object.id == null">Create</span>
                        <span ng-show="object.id != null">Edit</span>
                        @(entityName)
                    </h2>
                </div>
                <div class="modal-body">

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#general" role="tab" data-toggle="tab">General</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="general">
                            <form role="form">

                                @foreach (var property in entity.Properties)
                                {
                                    if (property.Name == "Id" || property.Name.StartsWith("__"))
                                    {
                                        continue;
                                    }
                                    else if (property.Name.EndsWith("Id"))
                                    {
                                        // Lookup
                                        var tableName = property.Name.Substring(0, property.Name.Length - 2);
                                        <div class="form-group">
                                            <label class="control-label" for="@(property.Name)">@(tableName)</label>
                                            <select name="@(property.Name)"
                                                    class="form-control"
                                                    ng-init="ctrl.getLookup('@(tableName)')"
                                                    ng-model="object.@(property.Name)">
                                                <option ng-repeat="selection in lookup['@(tableName)']" value="{{selection.Id}}">{{selection.Name}}</option>
                                            </select>
                                        </div>
                                    }
                                    else if (property.Type == "System.Boolean")
                                    {
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"
                                                       ng-model="object.@(property.Name)" /> @(property.Name)
                                                </label>
                                        </div>
                                    }
                                    else if (property.Type == "DateTime")
                                    {
                                        <div class="dropdown form-group">

                                            <label class="control-label" for="start">@(property.Name)</label>

                                            <p class="input-group">
                                                <input type="text"
                                                       class="form-control"
                                                       datepicker-popup="dd MMMM yyyy, HH:mm"
                                                       ng-model="object.@(property.Name)"
                                                       is-open="datepickeropen['@(property.Name)']"
                                                       close-text="Close" />
                                                <span class="input-group-btn">
                                                    <button type="button"
                                                            class="btn btn-default"
                                                            ng-click="ctrl.opendatepicker($event, '@(property.Name)')">
                                                        <i class="glyphicon glyphicon-calendar"></i>
                                                    </button>
                                                </span>
                                            </p>

                                        </div>
                                    }
                                    else if (property.Name.EndsWith("Text"))
                                    {
                                        <div class="form-group">
                                            <label class="control-label" for="@(property.Name)">@(property.Name)</label>
                                            <textarea name="@(property.Name)"
                                                      class="form-control"
                                                      ng-model="object.@(property.Name)"
                                                      placeholder="@(property.Name)" rows="10"></textarea>
                                        </div>
                                    }

                                    else if (property.Name == "AttachmentUrl")
                                    {
                                        <div class="form-group">
                                            <label class="control-label" for="@(property.Name)">@(property.Name)</label>

                                            <img class="img-responsive"
                                                 ng-src="{{object.AttachmentUrl}}?t={{timestamp}}" />

                                            <label class="control-label" style="margin-top: 10px">Replacement Image:</label>

                                            <div class="filedrop" data-maxfile="1" data-imageonly="true">
                                                <div ng-hide="files == null || files.length == 0 || files[0].type.indexOf( 'image' ) < 0" style="text-align:center">
                                                    <img ng-src="{{files[0].data}}" class="img-responsive" /><br />

                                                    {{files[0].size}} bytes
                                                </div>
                                                <p ng-show="files[0].type.indexOf( 'image' ) < 0">
                                                    You have dropped file of type: <b>{{files[0].type}}</b> <br />
                                                    Only images are supported.
                                                </p>
                                                <p ng-show="files == null || files.length == 0">
                                                    Drop image file here to replace the image.
                                                </p>
                                            </div>

                                        </div>
                                    }
                                    else
                                    {

                                        <div class="form-group">
                                            <label class="control-label" for="@(property.Name)">@(property.Name)</label>
                                            <input type="text"
                                                   class="form-control"
                                                   name="@(property.Name)"
                                                   ng-model="object.@(property.Name)"
                                                   placeholder="@(property.Name)" />
                                        </div>
                                    }
                                }
                            </form>
                        </div>
                    </div>

                    <div class="alert alert-danger alert-dismissible" ng-show="error != null">
                        {{error.message}}
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-success btn-lg"
                            data-target="#@(entityName)Form"
                            ng-disabled="isBusy"
                            ng-click="ctrl.save(object)">

                        <span>
                            <span class="busycenter" ng-show="isBusy">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span ng-show="object.id == null">Create</span>
                            <span ng-show="object.id != null">Save</span>
                        </span>
                    </button>
                </div>
            </div>
        </div>

    </div>


    <table id="@(entityName)Table"
           class="table table-striped table-hover"
           style="width: 100%">
        <thead>
            <tr>
                @foreach (var property in entity.Properties)
                {
                    if (property.Name == "Id" || property.Name == "__version")
                    {
                        continue;
                    }
                    else if (property.Name.EndsWith("Id"))
                    {
                        // Lookup
                        var tableName = property.Name.Substring(0, property.Name.Length - 2);
                        <th>@tableName</th>
                    }
                    else
                    {
                        <th>@property.Name</th>
                    }
                }
                <th class="commandColumn"></th>
            </tr>

        </thead>
        <tr ng-repeat="item in list">
            @foreach (var property in entity.Properties)
            {
                if (property.Name == "Id" || property.Name == "__version")
                {
                    continue;
                }
                else if (property.Name.EndsWith("Id"))
                {
                    // Lookup
                    var tableName = property.Name.Substring(0, property.Name.Length - 2);
                    <td>{{ lookup['@(tableName)'][item.@(property.Name)].Name }}</td>
                }
                else if (property.Type == "int")
                {
                    <td>{{item.@(property.Name) | number }}</td>
                }
                else if (property.Type == "double")
                {
                    <td>{{item.@(property.Name) | number:2 }}</td>
                }
                else if (property.Type == "DateTime")
                {
                    <td>{{item.@(property.Name) | date:'dd MMMM yyyy, HH:mm' }}</td>
                }
                else if (property.Name == "AttachmentUrl")
                {
                    <td>
                        <img class="img-responsive"
                             ng-src="{{item.AttachmentUrl}}" />
                    </td>
                }
                else
                {
                    <td>{{item.@(property.Name) }}</td>
                }
            }
            <td style="white-space: nowrap">

                <button class="btn btn-primary"
                        ng-click="ctrl.view(item)">
                    <span class="glyphicon glyphicon-pencil"></span>
                </button>
            </td>
        </tr>



    </table>

    <div>
        <button class="btn btn-success"
                ng-click="ctrl.create()">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span>Create new @(entityName)</span>
        </button>
    </div>

    <div class="alert alert-danger"
         ng-show="error">
        {{error.message}}
    </div>
</div>



@@section Scripts
{

<script>

    (function () {

        var module = angular.module('@(entityName)Module', ['ui.bootstrap', 'ncb']);

        module.factory("@(entityName)Dialog", ['ncbDialog', function (ncbDialog) {

            return function () {
                return new ncbDialog('#@(entityName)Form');
            };

        }]);

        module.controller("@(entityName)Controller", function ($scope, $rootScope, zumo, ncbOps, ncbLookup, @(entityName)Dialog) {

            var table = zumo.getTable("@(entityName)");
            var ncbLookup = new ncbLookup($scope, zumo);

            var standardOperations = new ncbOps($scope, table, '#@(entityName)Form');
            standardOperations.startScope();

            this.delete = standardOperations.del;
            this.save = standardOperations.save;
            this.refresh = standardOperations.list;

            this.getLookup = ncbLookup.lookup;

            this.refresh();

            this.view = function (object) {
                $scope.object = object;

                var dialog = new @(entityName)Dialog();
                dialog.show(object);
            }

            this.create = function () {
                $scope.object = {};

                var dialog = new @(entityName)Dialog();
                dialog.show($scope.object);
            }

            $scope.datepickeropen = {};
            this.opendatepicker = function ($event, target) {
                $event.preventDefault();
                $event.stopPropagation();

                $scope.datepickeropen[target] = !$scope.datepickeropen[target];
            }

        });

    })();

</script>

}